import React, {
    useState,
    useEffect
} from "react";
// import { Empty } from "../../../component/common";
import Empty from "../empty";
import Scrollbars from "react-custom-scrollbars";
import "./index.scss";

function Table(props) {
    let {
        tableHeader,
        className,
        data,
        style,
        pageSize,
        trStyle,
        tdStyle,
        emptyText,
        trClick,
        getList,
        scrollbar
    } = props;
    const [currentIndex, setCurrentIndex] = useState(1);
    const changeNum = (data, index) => {
        let count = data.orderNum? data.orderNum: 0;
        if(count < 2){
            count++;
        } else {
            count = 0;
        }
        console.log("changeNum", count);
        typeof getList === "function" &&
        getList(index, count, data.orderSign);
    }
    //不是数组就不收，哪来的回哪去吧
    if(!Array.isArray(tableHeader) || !Array.isArray(data)){
        return;
    }
    pageSize = pageSize? pageSize: 10;
    //若没有设置width值则默认都一样宽度
    let count = tableHeader.length;
    let width = parseInt(100/count) + "%";
    return (
        <div className={"data-table " + (className? className: "")} style={style? style: null}>
            <div className="table-thead">
            {
                tableHeader.map((item, index)=>{
                    return (
                        <div
                        className="table-th" 
                        style={{
                            width: item.width? item.width: width,
                            textAlign: item.textAlign? item.textAlign: "",
                            padding: item.padding? item.padding: "",
                            cursor: item.order? "pointer": "default"
                        }}
                        onClick={item.order? ()=>changeNum(item, index): null}
                        key={"th_" + index}
                        >{item.name}{item.order? <i className={item.orderNum == 1? "order_2": item.orderNum == 2? "order_3": "order_1"}></i>: ""}</div>
                    )
                })
            }
            </div>
            {
                scrollbar?
                <Scrollbars autoHeight autoHeightMax={"calc(100vh - 346px)"} renderThumbHorizontal={(props)=><div className="none" {...props}></div>}>
                {  
                    Array.isArray(data) &&
                    data.length > 0?
                    data.slice((currentIndex - 1)*pageSize, currentIndex*pageSize).map((item, index)=>{
                        let arr = [];
                        tableHeader.forEach((child, index1)=>{
                            if(child.key === "index"){
                                arr.push(
                                <div 
                                className="table-td" 
                                style={{
                                    width: child.width? child.width: width,
                                    textAlign: child.textAlign? child.textAlign: "",
                                    color: child.textColor? child.textColor: "",
                                    fontWeight: child.bold? "bold": "",
                                    ...tdStyle
                                }}
                                key={"td_" + index1}>
                                    {
                                        index + 1
                                    }
                                </div>
                                )
                            } else {
                                if(child.content){
                                    arr.push(
                                        item[child.key]
                                    )
                                } else {
                                    arr.push(
                                        <div 
                                        className="table-td"
                                        style={{
                                            width: child.width? child.width: width,
                                            textAlign: child.textAlign? child.textAlign: "",
                                            color: child.textColor? child.textColor: "",
                                            padding: child.padding? child.padding: "",
                                            fontWeight: child.bold? "bold": "",
                                            ...tdStyle
                                        }}
                                        title={typeof item[child.key] === "string"? item[child.key]? item[child.key]: "--": ""}
                                        key={"td_"+ index1}>
                                            {
                                                item[child.key]?
                                                item[child.key]:
                                                "--"
                                            }
                                        </div>
                                    )
                                }
                            } 
                        })
                        return (
                            <div 
                            className="table-tr"
                            key={"tr_"+index}
                            onClick={()=>{
                                typeof trClick === "function" &&
                                trClick(item)
                            }}
                            style={{
                                ...trStyle
                            }}>
                                {arr}
                            </div>
                        )
                    }):
                    <Empty
                    // className={"list-empty"}
                    style={{margin: "100px 0"}}
                    text={emptyText || "暂无内容~"}
                    ></Empty>
                }
                </Scrollbars>:
                Array.isArray(data) &&
                data.length > 0?
                data.slice((currentIndex - 1)*pageSize, currentIndex*pageSize).map((item, index)=>{
                    let arr = [];
                    tableHeader.forEach((child, index1)=>{
                        if(child.key === "index"){
                            arr.push(
                            <div 
                            className="table-td" 
                            style={{
                                width: child.width? child.width: width,
                                textAlign: child.textAlign? child.textAlign: "",
                                color: child.textColor? child.textColor: "",
                                fontWeight: child.bold? "bold": "",
                                ...tdStyle
                            }}
                            key={"td_" + index1}>
                                {
                                    index + 1
                                }
                            </div>
                            )
                        } else {
                            if(child.content){
                                arr.push(
                                    item[child.key]
                                )
                            } else {
                                arr.push(
                                    <div 
                                    className="table-td"
                                    style={{
                                        width: child.width? child.width: width,
                                        textAlign: child.textAlign? child.textAlign: "",
                                        color: child.textColor? child.textColor: "",
                                        padding: child.padding? child.padding: "",
                                        fontWeight: child.bold? "bold": "",
                                        ...tdStyle
                                    }}
                                    title={typeof item[child.key] === "string"? item[child.key]? item[child.key]: "--": ""}
                                    key={"td_"+index1}>
                                        {
                                            item[child.key]?
                                            item[child.key]:
                                            "--"
                                        }
                                    </div>
                                )
                            }
                        } 
                    })
                    return (
                        <div 
                        className="table-tr"
                        key={"tr_"+index}
                        onClick={()=>{
                            typeof trClick === "function" &&
                            trClick(item)
                        }}
                        style={{
                            ...trStyle
                        }}>
                            {arr}
                        </div>
                    )
                }):
                <Empty
                // className={"list-empty"}
                style={{margin: "100px 0"}}
                text={emptyText || "暂无内容~"}
                // type={"3"}
                ></Empty>
            }
            
        </div>  
    )
}

export default Table;